<template>
    <div class="Father">
        <h2>父组件</h2>
        <h3>
            房产：{{ house }}
        </h3>
        <button @click="changeToy">修改组件1的玩具</button>
        <button @click="changeComputer">修改组件2的电脑</button>
        <button @click="addBooks($refs)">让所有子组件的书加2</button>
        <Child1 ref="c1"></Child1>
        <Child2 ref="c2"></Child2>
    </div>
</template>

<script lang="ts" setup name="Father">
    import Child1 from "./Child1.vue"
    import Child2 from "./Child2.vue"
    import {ref} from "vue";
    //数据
    let house = ref(4)
    let c1 = ref()
    let c2 = ref()
    //方法
    function changeToy(){
        c1.value.toy = "小猪佩奇"
    }
    function changeComputer(){
        c2.value.computer = "华为"
    }
    function addBooks(refs:any){
        for (let key in refs) {
            refs[key].book += 2
        }
    }

    defineExpose({house})
</script>

<style scoped>
.Father{
    background-color: skyblue;
    height: 600px;
}
</style>